<template>
	<view class="container">
		<u-navbar title=" " :state="true" background="rgba(0,0,0,0)" :is-back="false" height="0"></u-navbar>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,i) in swiperList" :key="i">
				<view class="swiper-item">
					<image :src="item.img_src"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="member-title-box">
			<view class="image">
				<image
					src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201303%2F29%2F20130329205806_kTTnv.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628837166&t=5a74eb3e85cd25bf5c5031796f6000b1">
				</image>
				<view class="name">
					<text> 逆风而行</text>
					<u-icon name="man-add-fill" size="40" color="#FFE797"></u-icon>
				</view>
				<view class="text-content">
					升级书旗会员
				</view>
			</view>
		</view>
		<view class="list-box">
			<view class="list-title">
				<u-icon name="edit-pen" size="48rpx" color="#C4A880"></u-icon>
				<text>会员排行榜</text>
			</view>
			<view class="list-button">
				<view class="list-man">
					男生
				</view>
				<view class="list-woman">
					女生
				</view>

			</view>
			<view class="list-image-box">
				<view class="left-image">
					<image src="https://img-tailor.11222.cn/bcv/big/201608041500501419.jpg"></image>
				</view>
				<view class="left-text">
					三国之无上至尊
					<view class="text-area">
						作者：百里包子
						<view class="text-center">
							一个传奇，从小小的高中联赛开始起步。间接的带动了青少年足球的风靡，推动了整个中国足球的发展。当若干年后，孟秋回首往事的时候，他深深的感觉到，十六岁那年，跟随父母回到中国，实在是他人生中最大的一个转折点。传奇之路，从现在开始。
						</view>
					</view>
					<view class="foot">
						连载
					</view>
				</view>
			</view>
			<!-- 底部列表 -->
			<view class="foot-list-box">
				<view class="foot-list-body" v-for="(item,i) in footlist" :key="i">
					<view class="foot-list-text" >
						<text>{{item.title}}</text>
						{{item.name}}
						
					</view>
					<view class="foot">
						{{item.num}}
					</view>
					
				</view>				
			</view>
			<view class="foot-end">
				查看排行榜
			</view>
		</view>
		<!-- 热门推荐 -->
		<view class="content-box">
			<view class="content-tittle">
				<u-icon name="edit-pen" size="48rpx" color="#C4A880"></u-icon>
				<text>热门推荐</text>
			</view>
			<view class="content-image-body">
			
			<block v-for="(item1,i1) in imageList" :key="i1">
				<view class="content-image" >
					<image :src="item1.image_src" ></image>
					<text>{{item1.img_name}}</text>
					<view class="text-name">
						{{item1.name}}
					</view>
				</view>
			</block>
			</view>
		</view>
		<!-- 大家都在看 -->
		<view class="all-read-box">
			<all-read></all-read>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [{
						img_src: "https://img-tailor.11222.cn/bcv/big/1125237685815.jpg"
					},
					{
						img_src: "https://img-tailor.11222.cn/bcv/big/1132857687346.jpg"
					},
					{
						img_src: "https://img-tailor.11222.cn/bcv/big/1191817677496.jpg"
					},
					{
						img_src: "https://img-tailor.11222.cn/bcv/big/1169067973806.jpg"
					},
					{
						img_src: "https://img-tailor.11222.cn/bcv/big/1165387710043.jpg"
					}
				],
				footlist:[{
					title:2,
					name:"洪荒降临之最强玩家",
					num:"连载"
				},
				{
					title:3,
					name:"九天剑主",
					num:"完结"
				},
				{
					title:4,
					name:"大唐之千古帝王",
					num:"连载"
				},
				{
					title:5,
					name:"末日天下",
					num:"完结"
				}
				],
				imageList:[{
					image_src:"https://img-tailor.11222.cn/bcv/big/1160427672634.jpg",
					img_name:"有风向我吹来",
					name:"叶枫"
				},
				{
					image_src:"https://img-tailor.11222.cn/bcv/big/1151958341491.jpg",
					img_name:"我的高配男友",
					name:"打桩永动机"
				},
				{
					image_src:"https://img-tailor.11222.cn/bcv/big/201712121333215738.jpg",
					img_name:"老街中的痞子",
					name:"天邦群主"
				},
				{
					image_src:"https://img-tailor.11222.cn/bcv/big/1187006720460.jpg",
					img_name:"太古狂魔",
					name:"老肥"
				},
				
				{
					image_src:"https://img-tailor.11222.cn/bcv/big/1173637847453.jpg",
					img_name:"绝世医帝",
					name:"冰糖"
				},
				{
					image_src:"https://img-tailor.11222.cn/bcv/big/201710161620363580.jpg",
					img_name:"搏击霸主",
					name:"屠苏"
				},
				{
					image_src:"https://img-tailor.11222.cn/bcv/big/201807251118065024.jpg",
					img_name:"大山里的青春",
					name:"罗晓"
				},
				{
					image_src:"https://img-tailor.11222.cn/bcv/big/1137208301231.jpg",
					img_name:"我在地府当团宠",
					name:"回马"
				}]

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F8F8F8;

	}

	.member-title-box {
		background: #FFFFFF;
		margin: 0 20rpx;
		padding: 0 10px;
		position: relative;
		top: -40rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;


		height: 150rpx;

		.image {
			display: flex;
			// margin: 40rpx;
			align-items: center;
			width: 100%;
			justify-content: space-between;

			.name {
				font-size: 30rpx;
				font-weight: solid;
				margin-right: 60px;

				text {
					padding-right: 10rpx;
				}
			}

			.text-content {
				border-radius: 25px;
				background: #C4A880;
				// font-size: ;
				color: white;
				padding: 15rpx;

			}

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
		}
	}

	.list-box {
		background: #fff;
		border-radius: 10rpx;

		.list-title {
			font-size: 36rpx;
			font-weight: solid;
			padding: 20rpx;

			text {
				padding-left: 20rpx;
			}
		}

		.list-button {
			display: flex;
			justify-content: space-between;

			.list-man {
				border-radius: 10rpx;
				color: white;
				text-align: center;
				padding-top: 20rpx;
				font-size: 32rpx;
				height: 80rpx;
				width: 350rpx;
				background: #C4A880;
				margin-left: 20rpx;
			}

			.list-woman {
				font-size: 32rpx;
				height: 80rpx;
				width: 350rpx;
				text-align: center;
				padding-top: 20rpx;
				color: black;
				margin-right: 20rpx;
				background: #CCCCCC;
				border-radius: 10rpx;
			}
		}

		.list-image-box {
			display: flex;
			margin: 20rpx;

			.left-image {
				display: flex;
				image {
					width: 200rpx;
					height: 300rpx;
					margin-right: 30rpx;
					border-radius: 10rpx;
				}
			}

			.left-text {
				font-size: 40rpx;

				.text-area {
					font-size: 30rpx;
					color: gray;
					padding: 20rpx 0;

					.text-center {
						font-size: 30rpx;
						color: gray;
						height: 100rpx;
						padding: 20rpx 0;
						white-space: wrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.foot {
					border: 1px solid #18B566;
					font-size: 24rpx;
					color: #18B566;
					background: #fff;
					border-radius: 10rpx;
					width: 80rpx;
					padding: 10rpx;
					margin-top: 20rpx;
					text-align: center;
					
				}
			}

		}
		.foot-list-box{
			border-radius: 12rpx;
			margin-top: 20rpx;
			.foot-list-body{
				margin-top: 25rpx;
			display: flex;
			align-items: center;
			border-top: 1px solid#C8C7CC;
			justify-content: space-between;
			.foot-list-text{
				font-size: 36rpx;
				text-align: center;
				padding: 25rpx;
				text{
					margin-right: 40rpx;
					color: #C4A880;
				}
			
			}
			.foot {
				border: 1px solid #18B566;
				font-size: 24rpx;
				color: #18B566;
				background: #fff;
				border-radius: 10rpx;
				width: 100rpx;
				height: 60rpx;
				padding-top: 5rpx;
				margin: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
			}
			
		}
	
		}
	.foot-end{
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content:center;
			border-top: 1px solid#C8C7CC;
			padding: 20rpx;
			
		}
	}
	
	.content-box{
		background: #fff;
		margin: 20rpx 0;
		.content-tittle{
			font-size: 36rpx;
			font-weight: solid;
			padding: 20rpx;
			
			text {
				padding-left: 20rpx;
			}
		}
		.content-image-body{
			margin: 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			// width: 33.3%;
		.content-image{
			display: flex;
			flex-direction: column;
			margin: 20rpx 10rpx;
			.text-name{
				color: gray;
				margin: 10rpx;
			}
			text{
				margin-top: 10rpx;
				font-size: 24rpx;
			}
			image {
				width: 150rpx;
				height: 250rpx;
				// margin-right: 30rpx;
				border-radius: 10rpx;
			}
		}
		}
	}
	.all-read-box{
		background: #fff;
		margin: 20rpx 0;
	}
</style>
